<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mall</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .van-address-list__bottom{
            display: none;
        }
        .bottombtn{
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
        }
        .btn{
            width: 50%;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @edit="onEdit"
        /> 
        

        <div class="bottombtn">
            <van-button class="btn" type="primary">确认</van-button>
            <van-button  class="btn" type="info" @click="onAdd()">新增地址</van-button>
        </div>
    </div>


    

    
    <script>
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
          el: '#app',
          data:{
            chosenAddressId: '1',
            list: [
                {
                id: '1',
                name: '张三',
                tel: '13000000000',
                address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
                },
                {
                id: '2',
                name: '李四',
                tel: '1310000000',
                address: '浙江省杭州市拱墅区莫干山路 50 号'
                }
            ]
          },
          methods: {
            onAdd() {
                window.location.href="./address-form.html"
            },
            onEdit(item, index) {
                Toast('编辑地址:' + index);
            }
   

          }
        });
    </script>
</body>
</html>